<template>
	<view class="new-th page-wrapper">
		<view class="card-three">
			<view v-for="card in fiche" :key="card.class" :class="['card-item', card.class]" @click="tiao(card)">
				<text class="card-title">{{ card.title }}</text>
				<image :src="card.image11" mode="scaleToFill" class="card-img11" />
				<image :src="card.image22" mode="scaleToFill" class="card-img22" />
			</view>
		</view>

		<CTabbar currentPath="/pages/companyManager/index"></CTabbar>
	</view>
</template>

<script>
	import CTabbar from "@/components/CTabbar";
	export default {
		name: 'companyManager',
		components: {
			CTabbar,
		},
		data() {
			return {
				fiche: [{
						title: "公司简介",
						class: "one-card",
						to: '/pages/introduction/introduction',
						image11: this.$getImageUrl("images/gongsijianjielefttop@2x.png"),
						image22: this.$getImageUrl("images/gongsijianjierightbo@2x.png"),
					},
					{
						title: "新闻中心",
						class: "two-card",
						to: '/pages/pressCenter/index',
						image11: this.$getImageUrl("images/xinwenzhongxinlt@2x.png"),
						image22: this.$getImageUrl("images/xinwenzhongxinrt@2x.png"),
					},
					{
						title: "组织架构",
						class: "three-card",
						to: '/pages/orgaNization/index',
						image11: this.$getImageUrl("images/zuzhijiagoult@2x.png"),
						image22: this.$getImageUrl("images/zuzhijiagourt@2x.png"),
					},
				],
			};
		},
		methods: {
			tiao(card) {
				uni.navigateTo({
					url: card.to,
					fail: (error) => {
						console.log(error);
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.new-th {
		overflow: scroll;
		padding: 0 74rpx;
		background-color: #f0f5fb;
	}

	.card-item {
		height: 290rpx;
		background: #fff;
		box-shadow: 0 20rpx 40rpx 0 #fe80560d;
		border-radius: 40rpx;
		margin-top: 60rpx;
		position: relative;
		padding: 60rpx;

		.card-title {
			font-size: 60rpx;
			font-weight: 500;
		}

		.card-img11 {
			width: 180rpx;
			height: 160rpx;
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			z-index: 100;
		}

		.card-img22 {
			width: 160rpx;
			height: 150rpx;
			position: absolute;
			right: 0rpx;
			bottom: 0rpx;
			z-index: 100;
		}

		&.one-card {
			.card-title {
				color: #bd2d2c;
				position: absolute;
				z-index: 101;
			}
		}

		&.two-card {
			.card-title {
				color: #409eff;
				position: absolute;
				z-index: 101;
			}
		}

		&.three-card {
			.card-title {
				color: #bd2d2c;
				position: absolute;
				z-index: 101;
			}
		}
	}
</style>
